<#include '/admin/header.html' >
<style>
	table{
		line-height:47px;
	}
	td input{
		height: 25px;
	}
	tr td{
		padding-right: 25px;
		white-space:nowrap;
	}
	.tab li{
		border-bottom: 1px solid #ccc;
        margin-right: 0px;
        padding: 0px 10px;
	}
	
</style>
<div class="admin-main">
	<script type="text/javascript" src="${ctx}/statics/e_tools/js/jquery.goodsCatsSelect.js"></script>
	<form id="hotgoodsForm">
	<div class="table_control">
		<div style="display: block;" class="searchAdvanced">
			<input id="Advanced" name="Advanced" type="hidden" value="0" />
			<table width="98%" border="0" cellspacing="0" cellpadding="8">
				<tr style="float: right;" >
					<td width="10%" align="right" style="padding-top: 3px;">商品分类:</td>
					<td width="13%" >
						<input type="text" id="cat_name" value="" style="width: 90%;" />
						<input type="hidden" id="cat_id" name="cat_id" value="" />
					</td>
					<td width="13%">按订单周期：</td>
					<td width="10%">
						<select id="cycle_type" name="cycle_type" style="height: 30px">
							<option value="1">按照月统计</option>
							<option value="0">按照年统计</option>
					    </select>
					</td>
					<td width="9%">
						<select id="year" style="height: 30px;" > </select>
					</td>
					<td width="9%" id="monthtd">
						<select id="month" style="height: 30px;">
						</select>
					</td>
					<td width="13%" style="text-align: center;">
							<a id="submit_form"  href="javascript:void(0);"	class="layui-btn layui-btn-normal layui-btn-small">开始搜索</a>
					</td>
				
				</tr>
			</table>
		</div>
	  </div>
	</form>
	<div class="clear height10"></div>

	<!-- 主体 -->
	<div class="input">
		<div style="display: block;" class="goods_input">
			<!--  用户记录当前的tabId -->
			<input type="hidden" id="now_tab_hid" value="1" />

			<!-- tab页标题 -->
		<div class="outcont" style="width: 100%">
			<div class="contentTab">
				<ul class="tab" style="width:1200px;height:40px;">
					<li tabid="1" class="contentTabS" style="width:5%;cursor: pointer;">下单金额</li>
					<li tabid="2" style="width:4%;cursor: pointer;">下单量</li>
					<div style="height:47px;width:66%;float:left;border-bottom: 1px solid #ccc"></div>	
				</ul>
			</div>
			
		</div>
			<div class="shadowBoxWhite wf100 whiteBox">
				<div class="text">
					<div class="tab-page">
						<!-- 注意  div中不能有数据  这个用来判断是否加载了数据！！！！！！！！！ -->
						<div class="tab-panel"
							h_url="${ctx}/shop/admin/goodsStatis/get-hot-goods-money.do"
							tabid="1"></div>
						<div class="tab-panel" style="display: none;"
							h_url="${ctx}/shop/admin/goodsStatis/get-hot-goods-num.do"
							tabid="2"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="clear height10"></div>
</div>

<div id="grid1" class="shadowBoxWhite tableDiv" width='100%'>
	<table id="moneydata"
		data-options="pageList: [50],pageSize:50,fitColumns:'true',queryParams:{'complete':'${complete!''}'}">
	</table>
</div>


</div>

<input type="hidden" id="this_type" value="1">

<script type="text/javascript">

var money_chart;
var num_chart;

var money_data = ${money_json}; 
var count;
$(function() {
	count=0;
	var currentYear = new Date().getFullYear();
	var historyYear = currentYear-10;
	currentYear = ${year};
	
	var currentmonth = new Date().getMonth();
	currentmonth+=1;
	currentmonth = ${month};
	
	for(var i=0;i<20;i++){
		if(currentYear==historyYear){
			$("#year").append("<option value='"+historyYear+"' selected='selected' >"+historyYear+"年</option>" );
		}else{
			$("#year").append("<option value='"+historyYear+"' >"+historyYear+"年</option>" );
		}
		historyYear++;
	}
	
	for(var i=1;i<=12;i++){
		if(currentmonth==i){
			$("#month").append("<option value='"+i+"' selected='selected' >"+i+"月</option>" );
		}else{
			$("#month").append("<option value='"+i+"' >"+i+"月</option>" );
		}
	}
	//默认加载第一个tab页
	loadTab(1)
	
	$(".goods_input .contentTab>ul>li").click(function() {
		var tabId = $(this).attr("tabid");
		$(".goods_input .contentTab>ul>li").removeClass("contentTabS");
		$(this).addClass("contentTabS");
		$(".tab-page .tab-panel").hide();
		$("#now_tab_hid").val(tabId);	//记录当前tabId
		loadTab(tabId);
	});
  
  //tab选项卡按钮样式
	
 	$(".tab li").eq(0).css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"})
		$(".tab li").click(function(){
			$this=$(this);
			$this.css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"}).siblings("li").css({"border-top":"white","border-bottom":"1px solid #ccc","border-right":"white","border-left":"white"})
		})

	
	$("#submit_form").click(function(){
		// 1.获取时间条件
		var dateWhere = getDateWhere();
		count=0;
		//如果没有时间条件 就不用刷新
		if(!dateWhere) {
			return;
		}
		
		// 2.记录这个页需要刷新
		$(".now_tab_data_hid").val("1");
		var tabId = $("#now_tab_hid").val();
		
		// 3.刷新数据页面
		refreshTab(tabId, dateWhere[0], dateWhere[1]);
		
		// 4.记录这个页不用刷新
		$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
	});	

	$("#cycle_type").change(function(){
			if($(this).val()==1){
				$("#monthtd").show();
			}else{
				$("#monthtd").hide();
			}
		});

	//分类选择
	 $('#cat_name').goodsCatsSelect({	
            callback: function (cat) {
               var cat_id = cat.cat_id;
               var cat_name = cat.string;
               $("#cat_name").val(cat_name);
               $("#cat_id").val(cat_id);
            }
      });
});

/**
 * 获取日期条件
 * @return dateWhere[] 下标0=开始时间  下标1=结束时间
 */
function getDateWhere(){
	
	var c_type = $("#cycle_type").val();
	var startDate, endDate; //开始时间和结束时间
	
	//如果是按照年来筛选订单的
	if(c_type == 2) {
		
		var year = $("#year").val();
		
		if(year == 0) {
			var dateWhere = [];
			dateWhere[0] = "";
			dateWhere[1] = "";
			return dateWhere;
		}
		
		startDate = year + "-01-01 0:0:00";
		endDate = year + "-12-31 23:59:59";
		
	} else {
		
		var year = parseInt($("#year").val());
		var month = parseInt($("#month").val());

		if(year == 0) {
			alert("请选择年份");
			return;
		}
		if(month == 0) {
			alert("请选择月份");
			return;
		}
		
		//得到一个月最后一天
		var lastDate = new Date(year, month, 0);
		var lastDay = lastDate.getDate();
		
		startDate = year + "-" + month + "-01 0:0:00";
		endDate = year + "-" + month + "-" + lastDay + " 23:59:59";
	}
	var dateWhere = [];
	dateWhere[0] = startDate;
	dateWhere[1] = endDate;
	return dateWhere;
}

function getParam(){
	var year = $("#year :selected").val();
	var month = $("#month :selected").val();
	if(year==null){
		year=2015;
		month=4;
	}
	var cat_id= $("input[name='cat_id']").val();
	var cycle_type = $("#cycle_type :selected").val();
	var param=[];
	param[0]=year;
	param[1]=month;
	param[2]=cat_id;
	param[3]=cycle_type;
	return param;
}

/**
 * 根据tabId刷新页面数据
 * @param tabId	tab页的id
 * @param startDate	条件：开始时间
 * @param endDate	条件：结束时间
 */
function refreshTab(tabId, startDate, endDate){
	
	tabId = parseInt(tabId);
	//暂时tabId与函数方式定死  也许还有更好的方法
	switch(tabId) {
	
		case 1:
			getGoodsMoney(startDate, endDate);
			break;
		case 2:
			getGoodsNum(startDate, endDate);
			break;
		default:
			getGoodsMoney(startDate, endDate);
				
	}
	
}



/**
 * 根据tabId加载tab页数据 或者 刷新数据
 * @param tabId	tab页的id
 */
function loadTab(tabId){
	
	var $tab = $(".tab-panel[tabid=" + tabId + "]");
	if($tab.html() == '') {
		$.ajax({
			url : $tab.attr("h_url"),
			type:'get',
			success:function(data){
				$tab.html(data);
			}
		});
	} else {
		var isRefresh = $(".now_tab_data_hid[tab_id='" + tabId + "']").val();
		
		if(count<1){
			var dateWhere = getDateWhere();
			//如果没有时间条件 就不用刷新
			if(!dateWhere) {
				return;
			}
			// 2.刷新数据页面
			refreshTab(tabId, dateWhere[0], dateWhere[1]);
			// 3.记录这个页不用刷新
			$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
			count++;
		}
		
		if (isRefresh == "1") {
			// 1.获取时间条件
			var dateWhere = getDateWhere();
			
			//如果没有时间条件 就不用刷新
			if(!dateWhere) {
				return;
			}
			
			// 2.刷新数据页面
			refreshTab(tabId, dateWhere[0], dateWhere[1]);
			
			// 3.记录这个页不用刷新
			$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
		}
	}
	$tab.show();
}


		
/**
 * 初始化柱状图
 */

 function moneyCharts(obj,text,data){
	 var option = {
		        title: {
		        	x: 'center',
		            text: '热卖商品top50'
		        },
		        tooltip: {
                    trigger: 'item',
                    formatter: function(params){
                    	var dataname = data[params.dataIndex].name;
                    	return dataname + '<br/>' + params.seriesName + ' : ' +params.value;
                    }
                },
		        legend: {
		        	bottom : 20,
		            data:[text]
		        },
		        toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
		        xAxis:{
		        	data: function (){
		                var list = [];
		                if(data.length <= 50){
		                	for (var i = 1;i<=data.length; i++) {
		                        list.push(i);
		                    }
		                	return list
		                }else{
		                	for (var i = 1;i <= 50; i++) {
		                        list.push(i);
		                    }
		                	return list;
		                }
		            }()
    	        },
    	        yAxis: {
    	            name: text
    	        },
		        series: [{
		            name: text,
		            type: 'bar',
		            data: function (){
			            var list = [];
			            if(data.length <= 50){
			            	for(var i=0;i<data.length;i++){
			            		list.push(data[i].y);
			            		}
			            	return list;
			            	}else{
			            		for (var i = 0;i < 50; i++) {
			                        list.push(data[i].y);
			                    }
			            		return list;
			            	}
			            
			        }(),
		            itemStyle: {
		                normal: {
		                	color:'#7cb5ec'
		                }
		            }
		        }]
		    };

		    /** 使用刚指定的配置项和数据显示图表。*/
		    obj.setOption(option);
}

</script>
<#include '/admin/footer.html' >

